<!--
  This view is used by both the Purchase and Order detail flows. When making changes, please ensure they play nice with both areas.
-->
<%
  let wrapClass = 'flexRow gutterHLg';
  if (ob.externallyFundable) wrapClass += ' pad rowMd';
%>
<div class="<%= wrapClass %>">
  <% if (ob.externallyFundable) { %>
    <div class="flexNoShrink">
      <a class="QR js-purchaseQRCode"><img class="js-qrCodeImg" src="<%= ob.qrDataUri %>"></a>
    </div>
  <% } %>
  <div class="flexExpand">
    <div class="flexVCent">
      <div class="flexExpand">
        <div class="rowSm clickable js-amountRow">
          <span class="h1 js-amountDueLine"><%= ob.amountDueLine %></span>
          <% if (ob.externallyFundable) { %>
            <button class="btnTxtOnly txUnb flipBtn js-copyAmount">
              <span class="clrTEm unFlipped"><%= ob.polyT('purchase.pendingSection.copy') %></span>
              <span class="flipped"><%= ob.polyT('purchase.pendingSection.copied') %></span>
            </button>
          <% } %>
        </div>
        <% if (ob.externallyFundable) { %>        
          <div class="tx5 rowMd clickable js-addressRow">
            <% const pAddress = ob.paymentAddress.length > 34 ? `${ob.paymentAddress.slice(0, 34)}…` : ob.paymentAddress; %>
            <span <% if (ob.paymentAddress.length > 34) print(`class="toolTipNoWrap toolTipTop" data-tip="${ob.paymentAddress}"`) %>><%= ob.polyT('purchase.pendingSection.to', { address: pAddress }) %></span>
            <button class="btnTxtOnly txUnb flipBtn js-copyAddress">
              <span class="clrTEm unFlipped"><%= ob.polyT('purchase.pendingSection.copy') %></span>
              <span class="flipped"><%= ob.polyT('purchase.pendingSection.copied') %></span>
            </button>
          </div>
        <% } %>
        <%
          const rowClass = ob.externallyFundable ? 'rowLg' : 'rowMd';
          const payFromWalletWrapClass = `flexRow gutterH ${rowClass}`;
        %>
        <div class="<%= payFromWalletWrapClass %>">
          <div class="col6">
            <%= ob.processingButton({
            className: 'btn btnThin width100 clrP clrBr clrSh2 js-payFromWallet',
            textClassName: 'flexCent',
            btnText: `<i class="icon">${ob.walletIconTmpl()}</i>${ob.polyT('purchase.pendingSection.payFromWallet')}`,
            }) %>
            <div class="js-confirmWalletContainer"></div>
          </div>
        </div>
        <% if (ob.externallyFundable) { %>
          <div class="txBase clrT2">
            <% if (['BTC', 'TBTC'].includes(ob.paymentCoin)) { %>
              <p>
                <%= ob.polyT('purchase.pendingSection.walletNote') %> <button class="btnAsLink js-fundWallet"><%= ob.polyT('purchase.pendingSection.walletLink') %></button>
              </p>
            <% } %>
            <p>
              <%= ob.polyT('purchase.pendingSection.feeNote') %>
            </p>
          </div>
        <% } %>
      </div>
    </div>
  </div>
</div>
<div class="tx6 clrT2">
  <% if (['BTC', 'TBTC'].includes(ob.paymentCoin)) { %>
    <% const link = `<a class="clrTEm" href="https://www.openbazaar.org/bitcoin">${ob.polyT('purchase.pendingSection.note1Link')}</a>`; %>
    <p><%= ob.polyT('purchase.pendingSection.note1', { link }) %></p>
  <% } %>
  <% if (ob.isModerated) { %>
  <p>
    <%= ob.polyT('purchase.pendingSection.note2') %>
    <br>
    <%= ob.polyT('purchase.pendingSection.note3') %>
  </p>
  <% } %>
  <p><%= ob.polyT('purchase.pendingSection.note4') %></p>
</div>
